<template>
    <div class="wrapper" :class="{small: size === 'small'}">
        <div class="avatar" :style="{backgroundImage: `url(${avatar})`}"></div>
        <SingalIcon v-if="status" class="status"/>
    </div>
</template>

<script>
import SingalIcon from '@/utils/Icon/profile/SingalIcon'
export default {
    props: {
        avatar: {
            type: String,
            default: ''
        },
        size: {
            type: String, // 'small' , 'middle'
            default: 'middle'
        },
        status: {
            type: String,
            default: ''
        }
    },
    components: {
        SingalIcon
    },
}
</script>

<style lang="less" scoped>
    .wrapper {
        width: 42px;
        height: 47px;
        position: relative;
        .avatar {
            border-radius: 50%;
            margin: 0 auto;
            width: 40px;
            height: 40px;
            background: url('~@/assets/icons/common/avatar.svg') center center no-repeat;
            background-size: cover;
        }
        .status {
            position: absolute;
            width: 42px;
            top: 32px;
            left: 0;
            right: 0;
            height: 15px;
        }
        &.small {
            height: 45px;
            .avatar {
                width: 34px;
                height: 34px;
            }
        }
    }
</style>